<template>
  <section>

    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item class="mb-10">
          <el-button size="small" type="success" @click="handleConf">新增模块</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-table :data="bandConfData" highlight-current-row v-loading="listLoading" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="moduleTitle" label="已配置模块" min-width="200">
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handleUnBand(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--    <el-table :data="confData" highlight-current-row v-loading="listLoading" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" label='序号' width="60">
      </el-table-column>
      <el-table-column prop="name" label="未绑定参数名称" width="200" sortable>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template scope="scope">
          <el-button size="small" @click="handleBand(scope.$index, scope.row)">绑定</el-button>
        </template>
      </el-table-column>
    </el-table> -->

    <el-dialog title="新增模块" :visible.sync='addConfVisible' :close-on-click-modal="false">
      <el-form :model="addConfForm" label-width="80px" ref="addConfForm">
        <el-form-item label="模块配置">
          <el-select v-model="moduleId" placeholder="请选择模块">
            <el-option v-for="item in unBandConfData" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addConfVisible = false">取消</el-button>
        <el-button type="success" @click.native="addConfSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>




  </section>
</template>

<script>
  export default {
    created() {},
    mounted() {
      this.id = this.$route.query.id;
      this.getDeviceTypeBandConfs();
      this.getDeviceTypeUnBandConfs();
    },
    data() {
      return {
        id: '',
        bandConfData: [],
        unBandConfData: [],
        order: '',
        max: '',
        min: '',
        moduleId: '',
        listLoading: false,
        //新增参数界面数据
        addConfForm: {

        },
        addLoading: false,
        addConfVisible: false,
        pageSize: 1000,
      }
    },
    methods: {
      getDeviceTypeBandConfs() {
        let params = {
          userId: this.id,
          pageSize: this.pageSize,
        }
        this.api.get('/work/awbModuleUser/list', {params: params}).then((res) => {
          this.bandConfData = res.data.result.records;
        });
      },
      getDeviceTypeUnBandConfs() {
        this.api.get('/work/awbModuleUser/getAllModule').then((res) => {
          this.unBandConfData = res.data.result;

        });

      },
      //添加绑定配置
      addConfSubmit: function() {
        if(!this.moduleId){
          this.$message.error('请选择模块');
          return
        }
        var params = {
          moduleId: this.moduleId,
          userId: this.id,

        }
        this.api.post('work/awbModuleUser/add', params).then((res) => {
          if(res){
            this.$message.success('操作成功');
            this.addConfVisible = false
            this.getDeviceTypeBandConfs();
            this.getDeviceTypeUnBandConfs();
          }
        });

      },
      //绑定
      handleBand: function(index, row) {
        var params = {

          conf_id: this.moduleId,
          device_type_id: this.device_type_id,
          order: this.order,

        }
        this.api.post('/work/awbDeviceType/typeBandConf', params).then((res) => {
          this.$message.success('操作成功');
        });

      },
      //解绑
      handleUnBand: function(index, row) {


        this.$confirm('确认删除该模块吗?', '提示', {
          type: 'warning'
        }).then(() => {


          var params = {

            id: row.id,

          }
          this.api.post('/work/awbModuleUser/delete', params).then((res) => {
            if(res){
              this.$message.success('操作成功');
              this.getDeviceTypeBandConfs();
              this.getDeviceTypeUnBandConfs();
            }
          });
        }).catch(() => {

        });


      },
      handleConf: function(index, row) {

        this.addConfVisible = true;
        // this.addConfForm = Object.assign({}, row);



      },


    }
  }
</script>

<style>
</style>
